<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.num" placeholder="请输入领用编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.materialNum" placeholder="请输入耗材编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.materialName" placeholder="请输入耗材名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择领用状态">
              <el-option label="已出库" value="1"></el-option>
              <el-option label="待审核" value="3" ></el-option>
              <el-option label="审核通过" value="4"></el-option>
              <el-option label="审核不通过" value="5"></el-option>
              <el-option label="已报废" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="materialReceiveApply('4')">审核通过</el-button>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="materialReceiveApply('5')">审核不通过</el-button>
        <!-- <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit('view')">查看</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button> -->
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          border
          size="mini"
          style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
            align="center"
            width="200px"
            prop="NUM"
            label="领用编号">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="MATERIALNUM"
            label="耗材编号">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="MATERIALNAME"
            label="耗材名称">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="MATERIALQUANTITY"
            label="当前库存">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="QUANTITY"
            label="领用数量">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="REASON"
            label="领用原因">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="REMARKS"
            label="备注">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="CREATEUSERNAME"
            label="申请人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATETIME"
            width="160px"
            label="申请时间">
            <template slot-scope="scope">
              {{new Date(scope.row.CREATETIME).toLocaleString()}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="EXAMINEUSERNAME"
            label="审核人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="EXAMINETIME"
            width="160px"
            label="审核时间">
            <template slot-scope="scope">
              {{new Date(scope.row.EXAMINETIME).toLocaleString()}}
            </template>
          </el-table-column>
          <el-table-column 
            align="center"
            prop="RECEIVESTATUS"
            label="状态"
            fixed="right">
            <template slot-scope="scope">
              {{scope.row.RECEIVESTATUS == 1 ? '已出库' 
              : scope.row.RECEIVESTATUS == 0 ? '已报废' 
              : scope.row.RECEIVESTATUS == 3 ? '待审核' 
              : scope.row.RECEIVESTATUS == 4 ? '审核通过' 
              : scope.row.RECEIVESTATUS == 5 ? '审核不通过' 
              : '错误状态'}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="采购计划" :visible.sync="dialogFormVisible" center width="50%">
      <el-form :model="form" ref="form" :rules="rules" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购名称" prop="name">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购日期" class="dateStyle" prop="purchaseTime">
              <el-date-picker :disabled="nptDisabled" value-format="yyyy-MM-dd" size="mini" type="date" placeholder="请选择日期" v-model="form.purchaseTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="采购原因" prop="reason">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.reason" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.remarks" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table
              :data="warnTableData"
              border
              size="mini"
              style="width: 100%">
              <el-table-column
                align="center"
                prop="NUM"
                width="120px"
                label="耗材编号">
              </el-table-column>
              <el-table-column
                align="center"
                width="120px"
                prop="NAME"
                label="耗材名称">
              </el-table-column>
              <el-table-column
                align="center"
                prop="QUANTITY"
                width="120px"
                label="剩余数量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="WARNQUANTITY"
                width="120px"
                label="预警数量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="UNIT"
                width="108px"
                label="单位">
              </el-table-column>
              <el-table-column
                align="center"
                width="100px"
                label="数量">
                <template slot-scope="scope">
                  <el-input :disabled="nptDisabled" v-model="scope.row.MATERIALPURCHASECOMPANY" placeholder="输入数量" padding-left='0px'></el-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="100px"
                label="单价">
                <template slot-scope="scope">
                  <el-input :disabled="nptDisabled" v-model="scope.row.MATERIALPURCHASEPRICE" placeholder="输入单价" padding-left='0px'></el-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="120px"
                label="供应商">
                <template slot-scope="scope">
                  <el-input :disabled="nptDisabled" v-model="scope.row.MATERIALPURCHASECOMPANY" placeholder="输入供货单位"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm(4)" v-if="examineDisabled">通过</el-button>
        <el-button size="mini" type="primary" @click="submitForm(5)" v-if="examineDisabled">不通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "trainBase",
    data() {
      return{
        pagination: {
          pageSize: 10,
          total: 1,
          pageNo: 1
        },
        warnPagination: {
          pageSize: 500,
          total: 1,
          pageNo: 1
        },
        form: {
          id: '',
          purchaseTime: '',
          reason: '',
          remarks: '',
          materialPurchaseDetaileds: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入计划名称', trigger: 'blur' },
          ],
          purchaseTime: [
            { required: true, message: '请选择采购日期', trigger: 'blur' },
          ],
          reason: [
            { required: true, message: '请输入采购原因', trigger: 'blur' },
          ],
          MATERIALPURCHASECOMPANY: [
            { required: true, message: '请输入采购数量', trigger: 'blur' },
          ],
          MATERIALPURCHASEPRICE: [
            { required: true, message: '请输入采购单价', trigger: 'blur' },
          ],
          MATERIALPURCHASECOMPANY: [
            { required: true, message: '请输入供应商', trigger: 'blur' },
          ],
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        formInline: {},
        tableData: [],
        warnTableData: [],
        userList: [],
        selectId: [],
        btnDisabled: true,
        isEdit: false,
        isWarnEdit: false,
        nptDisabled: false,
        examineDisabled: false
      }
    },
    created() {
      this.search(3);
    },
    methods: {
      search() {
        let form = {
          num: this.formInline.num,
          materialNum: this.formInline.materialNum,
          materialName: this.formInline.materialName,
          status: this.formInline.status,
          pageSize: this.pagination.pageSize,
          pageNo: 1
        }
        this.$post('/materialReceive/findMaterialReceive', form ).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      edit(val) {
        if(val === 'view') {
          this.nptDisabled = true
          this.examineDisabled = false;
        } else {
          console.log(this.selectId[0].PURCHASESTATUS);
          if(this.selectId[0].PURCHASESTATUS != 3){
            this.$message.error('只能审核待审核的计划');
            return ;
          }
          this.nptDisabled = true
          this.examineDisabled = true;
        }
        this.isEdit = true;
        this.$post('/materialPurchase/findMaterialPurchaseDetailedByMaterialPurchaseId', {id : this.selectId[0].ID}).then(res => {
          this.warnTableData = res.data.data.dataList;
        })
        this.form.id = this.selectId[0].ID;
        this.form.name = this.selectId[0].NAME;
        this.form.purchaseTime = new Date(this.selectId[0].PURCHASETIME);
        this.form.reason = this.selectId[0].REASON;
        this.form.remarks = this.selectId[0].REMARKS;
        this.dialogFormVisible = true
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length === 1) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.search();
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.search();
      },
      submitForm(status) {
        let form = {
          id: this.selectId[0].ID,
          purchaseStatus: status
        }
        this.$post('/materialPurchase/examine', form).then(res => {
          if(res.data.status === 1){
            this.$message.success('保存成功');
            this.search();
            this.dialogFormVisible = false;
            this.isEdit = false;
          } else{
            this.$message.error(res.data.msg)
          }
        });
      },
      materialReceiveApply(status){
        if(this.selectId[0].RECEIVESTATUS !== 3){
          this.$message.error('只能审核待审核的申请');
          return ;
        }
        this.$confirm('是否确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$post('/materialReceive/examine', {id : this.selectId[0].ID, status : status}).then(res => {
            if(res.data.status === 1){
              this.$message.success('保存成功');
              this.search();
              this.reachFormVisible = false;
              this.isEdit = false;
            } else{
              this.$message.error(res.data.msg)
            }
          });
        }).catch(() => {
          
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .dateStyle{
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
  /deep/.el-form-item__error {
    top: 32px;
  }
</style>
